<template>
  <div class="col-lg-6 col-md-12">
    <div class="news-feed-area">
      <div class="news-feed news-feed-form">
        <h3 class="news-feed-title">动态发布</h3>
        <form>
          <div class="form-group">
										<textarea name="message" class="form-control"
                              placeholder="分享美好时光..." v-model="dynamicForm.content"></textarea>
          </div>
          <ul class="button-group d-flex justify-content-between align-items-center">
            <li class="photo-btn">
              <button type="submit"><i class="flaticon-gallery"></i> 照片</button>
            </li>
            <li class="video-btn">
              <button type="submit"><i class="flaticon-video"></i> 视频</button>
            </li>
            <li class="tag-btn">
              <button type="submit"><i class="flaticon-tag"></i> 话题</button>
            </li>
            <li class="post-btn">
              <button type="submit" @click="handlePost()">发送</button>
            </li>
          </ul>
        </form>
      </div>

      <!--      动态列表-->
      <div class="news-feed news-feed-post" v-for="dy in dynamicList">
        <div class="post-header d-flex justify-content-between align-items-center">
          <div class="image">
            <a href="my-profile.html"><img
                :src="dy.webUser.webUserInfo.headPortrait"
                class="rounded-circle" alt="image"></a>
          </div>
          <div class="info ms-3">
            <span class="name"><a href="my-profile.html">{{dy.webUser.webUserInfo.nickname}}</a></span>
            <span class="small-text"><a href="#">{{ dy.postTime }}</a></span>
          </div>
          <div class="dropdown">
            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false"><i
                class="flaticon-menu"></i></button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item d-flex align-items-center" href="#"><i
                  class="flaticon-edit"></i> 编辑</a></li>
              <li><a class="dropdown-item d-flex align-items-center" href="#"><i
                  class="flaticon-private"></i> 隐藏</a></li>
              <li><a class="dropdown-item d-flex align-items-center" href="#"><i
                  class="flaticon-trash"></i> 删除</a></li>
            </ul>
          </div>
        </div>
        <div class="post-body">
          <p>{{ dy.content }}</p>
<!--          <div class="post-image">-->
<!--            <img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png" alt="image">-->
<!--          </div>-->
          <ul class="post-meta-wrap d-flex justify-content-between align-items-center">
            <li class="post-react">
              <a href="#"><i class="flaticon-like"></i><span></span> <span
                  class="number">{{ dy.likeNum }} </span></a>

            </li>
            <li class="post-comment">
              <a href="#"><i class="flaticon-comment"></i><span>评论</span> <span
                  class="number">{{ dy.review }} </span></a>
            </li>
            <!-- <li class="post-share">
              <a href="#"><i class="flaticon-share"></i><span>分享</span> <span
                  class="number">24 </span></a>
            </li> -->
          </ul>

          <form class="post-footer">
            <div class="footer-image">
              <a href="#"><img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png"
                               class="rounded-circle"
                               alt="image"></a>
            </div>
            <div class="form-group">
											<textarea name="message" class="form-control"
                                placeholder="留下评论..."></textarea>
              <label><a href="#"><i class="flaticon-photo-camera"></i></a></label>
            </div>
          </form>
        </div>
      </div>

      <div class="load-more-posts-btn">
        <a href="#"><i class="flaticon-loading"></i>加载更多</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {login} from '@/api/webUser.js'
import {postDynamic, listDynamic} from '@/api/dynamic.js'
import {ElMessage} from 'element-plus'
import router from '@/router/index.js'
import useUserStore from '@/stores/loginStore.js'

const dynamicForm = ref({
  uid: useUserStore().userModel.uid, //默认值-1表示没有登录
  content: "",
  type: 0
})

const dynamicList = ref([])

// 进入页面查询列表
onMounted(async () => {
  const req = await listDynamic()
  console.log(JSON.stringify(req.data, null, 2))
  console.log(11)
  console.log(req.data)
  if (req.code === 200) {
    dynamicList.value = req.data
  }
})


//点击发布动态,触发的事件
const handlePost = async () => {
  if (dynamicForm.value.uid === -1) {
    ElMessage.info("用户没有登录请登录")
    router.push('/login')
  }
  const request = await postDynamic(dynamicForm.value);
  if (request.code == 200) {
    ElMessage.success("发布成功")
  }
}
</script>

<style scoped>

</style>